<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="page.grid.js"></script>
<style type="text/css">
a{
	cursor: pointer;
	text-decoration: none;
	color: black;
}
.pageSpan{
	width: 60px;
	height: 25px;
	list-style: none;
	border: 1px solid gray;
	text-align: center;
	line-height: 25px;
	float: left;
	margin-left: 3px;
	cursor: pointer;
	
}
.pageNum{
	width: 30px;
	height: 25px;
	list-style: none;
	border: 1px solid gray;
	text-align: center;
	line-height: 25px;
	float: left;
	margin-left: 3px;
	cursor: pointer;
}
.focus{
	background-color: gray;
}
table {
	width: 100%; 
	border-collapse: collapse ;
}
table,table tr,table th,table td{
	border: 1px solid #dd127A;
}
.tr_focus{
	background-color:#b5b4cb
}
.tr_mouse_over{
	background-color:#d8d8d8
}
</style>
<script type="text/javascript">
$(function(){
	$("#dataGrid").createPage({
	    url: 'data.json',
	    showIndex: 10,
	    pageIndexId: 'pageIndex',
		params: {},
		showNum:true,
		showCheckBox:true,
		theadId:"dataGridTheadId",
		tbodyId: "dataGridTbodyId",
	    backFn:function(data){
	       // console.log(data);
	    }
	});
});
</script>
</head>
<body>
	 <table id="dataGrid">
			<thead id="dataGridTheadId">
				<tr>
					<th cname="userName">姓名</th>
					<th cname="phone">电话</th>
				</tr>
			</thead>
			<tbody id="dataGridTbodyId">
				
			</tbody>
		</table> 
	<div id="pageIndex" style="width:auto;height: 100px;margin-top: 50px;font-size: 15px;">
		
	</div>
</body>
</html>